<template>
  <div class="helper">
    <span class="left">
      {{unFinishedToDoLength}} items left
    </span>
    <span class="tabs">
      <span v-for="state in states" 
            :key = "state" 
            :class = "[state, filter === state ? 'actived' : '']" 
            @click = "toggleHandler(state)">
        {{state}}
      </span>
    </span>
    <span class="clear" @click="clearCompleted">
      clear completed
    </span>
  </div>
</template>

<script>
  export default {
    props: {
      filter: {
        type: String,
        required: true
      },
      todos: {
        type: Array,
        required: true
      }
    },
    data () {
      return {
        states: ["all", "active", "completed"]
      }
    },
    computed: {
      unFinishedToDoLength () {
        return this.todos.filter(todo => !todo.completed).length
      }
    },
    methods: {
      toggleHandler (state) {
        this.$emit('toggle', state);
      },
      clearCompleted () {
        this.$emit('clrCompleted')
      }
    }
  }
</script>
<style lang = 'stylus' scoped>
.helper
  padding .7rem .6rem
  text-align center
  font-size 1.4rem
.left 
  float left
.tabs
  cursor pointer
.clear
  float right
  cursor pointer
.actived
  border .1rem solid red
</style>